<template>
  <div class="app">
    <h1>当前计数为: {{ counter }}</h1>
    <h1>双倍快乐: {{ doubleCounter }}</h1>
    <button @click="increment">+</button>
    <hr />
    <h1>修改computed中的值</h1>
    <h1>{{ firstname + '-' + lastname }}</h1>
    <h1>{{ fullname }}</h1>
    <button @click="changeFullName">changeFullName</button>
  </div>
</template>
<script>
import { computed, ref } from 'vue';

export default {
  setup() {
    let counter = ref(100);
    const increment = () => {
      counter.value++;
    };
    // function
    const doubleCounter = computed(() => {
      return counter.value * 2;
    });
    // doubleCounter.value = 200;

    // object
    let firstname = ref('qf');
    let lastname = ref('html5');
    const fullname = computed({
      get() {
        return firstname.value + '-' + lastname.value;
      },
      set(val) {
        // console.log(val);
        let arr = val.split('-');
        // firstname.value = arr[0];
        lastname.value = arr[1];
      },
    });
    const changeFullName = () => {
      fullname.value = 'qf-大数据';
    };
    return {
      counter,
      doubleCounter,
      increment,
      firstname,
      lastname,
      fullname,
      changeFullName,
    };
  },
};
</script>
<style lang="scss" scoped></style>
